<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in info" :style="`background:${item.color}`" :key="index">
        <div class="recommend">
          <div>{{item.name}}</div>
        </div>
        <div class="content">
          <div class="work">
            <div class="ide">{{ item.title }}</div>
            <span>LV.{{ item.num }}权益：邀请新户并完成认证可得5元</span>
          </div>
          <div class="bonus">
            <div class="btitle">邀请新户加入众享空间并完成认证</div>
            <div class="progress">
              <van-progress :percentage="85" color="#43536b" pivot-text="16笔"/>
            </div>
            <div class="term">
              <span>距离下一等级还差2笔</span>
              <span>20笔</span>
            </div>
          </div>
        </div>
        <div class="detail">查看详情 ></div>
       </van-swipe-item>
  </van-swipe>
  </div>
</template>

<script>

export default {
  name: 'swipeItem',
  props:['busLevel','supLevel','guideLevel'],
  // data(){
  //   return {
  //     recommendList:['引荐','推荐','指导'],
  //
  //   }
  // },
  methods:{

    level(val){
      let title = '';
      let color = '';
      let num = ''
      switch(val){
        case 1:
           title = '青铜专员'
           color = "#e1bc90";
           num = val;
          break;
        case 2:
          title = '白银经理'
          color = "#c2ccd7";
          num = val;
          break;
        case 3:
          title = '黄金经理'
          color = "#dfbc87";
          num = val;
          break;
        case 4:
          title = '砖石主管'
          color = "#a8bcf6";
          num = val;
          break;
        case 5:
          title = '星耀总监'
          color = "#c6acfc";
          num = val;
          break;
        case 6:
          title = '最强老板'
          color = "#f5c48f";
          num = val;
          break;
      }
      return {title,color,num}
    }

  },
  computed:{
  //  引荐
    bus(){
      const reco = {name:'引荐'};
      // return this.level(this.busLevel);
      const content = Object.assign({},this.level(this.busLevel),reco);
      return content
    },
    // 推荐
    sup(){
      const reco = {name:'推荐'}
      // return this.level(this.supLevel);
      // return Object.assign({},this.level(this.supLevel),reco)
      const content = Object.assign({},this.level(this.supLevel),reco);
      return content
    },
    // 指导
    guide(){
      const reco = {name:'指导'}
      // return this.level(this.guideLevel);
      // return Object.assign({},this.level(this.guideLevel),reco)
      const content = Object.assign({},this.level(this.guideLevel),reco);
      return content
    },
    info(){
      return [this.bus,this.sup,this.guide];

    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-swipe{
  position: relative;
  overflow: hidden;
  height: 150px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  border-radius: 3%;
  background-color: #c6acfc;
}
.recommend{
  position: absolute;
  right: 5px;
  top: 15px;
  width: 30px;
  height: 15px;
  line-height: 15px;
  padding: 2px 5px;
  font-size: 12px;
  text-align: center;
  color: white;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.8);
}
.content{
  color:#333;
  margin: 10px 10px;
  padding: 10px;
  font-size: 16px;
}
.ide{
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
}
.work span{
  font-size: 12px;
}
.bonus{
  margin: 10px 0 10px;
}
.bonus .btitle{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.bonus .progress{
  width: 70%;
}
.term{
  width: 70%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.detail{
  position: absolute;
  color: #333;
  right: 5px;
  bottom: 15px;
  height: 15px;
  line-height: 15px;
  padding: 2px 5px;
  font-size: 12px;
}
</style>